<!-- 首页 -->
<template>
  <div class="home-page">
    <!-- 轮播图 -->
    <div class="home-carousel">
      <el-carousel trigger="click" height="450px" class="home-carousel__images" :interval="5000">
        <el-carousel-item v-for="item in carouselMsg" :key="item.id">
          <img v-lazy="item.newsImg" alt width="100%" height="100%" />
          <div class="home-carousel__message">
            <div>{{item.newsTitle}}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 新闻 -->
    <div class="home-news">
      <div class="hone-new__items" v-for="(item,index) in news.slice(-3).reverse()" :key="item.id">
        <el-tag type="success" effect="dark" v-if="item.newsType =='notice'">通知</el-tag>
        <el-tag type="danger" effect="dark" v-if="item.newsType =='illness'">疫情</el-tag>
        <el-tag type="primary" effect="dark" v-if="item.newsType =='news'">新闻</el-tag>
        <a @click.stop="redirectToNews(item.id)">{{item.newsTitle}}</a>
      </div>
    </div>
    <!-- 惠民服务 -->
    <div class="home-server">
      <h2>服务中心</h2>
      <div class="home-server__flex">
        <div class="home-server__items" v-for="(item,index) in serverItem" :key="item.id" @click="handleRouter(item)">
          <span>
            <el-image :src="item.imgUrl" alt width="100%" height="123px" lazy />
            <div class="home-server__content">
              <h3>{{item.serveName}}</h3>
            </div>
          </span>
        </div>
      </div>
    </div>
    <!-- 意见投诉 -->
    <div class="home-suggest" ref="suggest">
      <h2>意见投诉</h2>
      <div class="home-suggest__flex">
        <img src="../assets/imgs/suggestionImg.png" width="50%" height="500px" alt />
        <div class="home-suggest__flex--main">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model.number="form.phone" :disabled="!form.anonymous"></el-input>
            </el-form-item>
            <el-form-item label="实名选项" prop="anonymous">
              <el-switch v-model="form.anonymous" @change="handleSwitch"></el-switch>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" :disabled="!form.anonymous"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="des">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5}" maxlength="200" v-model="form.des" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="reset('form')">重置</el-button>
              <el-button type="primary" @click="onSubmit">立即提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tools from '../utils';
import { findAllNews, submitSuggestion } from '../api/index';
export default {
  name: '',
  data() {
    return {
      // 轮播图信息
      carouselMsg: [],
      // 新闻
      news: [],
      // 所有服务
      serverItem: [
        {
          id: '111',
          serveName: '缴费中心',
          imgUrl: require('../assets/imgs/powerPay.png'),
          routeUrl: 'payCenter',
        },
        {
          id: '222',
          serveName: '家政清洁',
          imgUrl: require('../assets/imgs/propertyPay.png'),
          routeUrl: 'clean',
        },
        {
          id: '333',
          serveName: '维修中心',
          imgUrl: require('../assets/imgs/clean.png'),
          routeUrl: 'fixCenter',
        },
        {
          id: '444',
          serveName: '特色服务',
          imgUrl: require('../assets/imgs/waterFix.png'),
          routeUrl: '',
        },
        {
          id: '555',
          serveName: '公告新闻',
          imgUrl: require('../assets/imgs/electricFix.png'),
          routeUrl: 'news',
        },
        {
          id: '666',
          serveName: '订单列表',
          imgUrl: require('../assets/imgs/InternetServer.png'),
          routeUrl: 'orderList',
        },
        {
          id: '777',
          serveName: '人脸识别',
          imgUrl: require('../assets/imgs/bussinessCenter.png'),
          routeUrl: '',
        },
        {
          id: '888',
          serveName: '信息中心',
          imgUrl: require('../assets/imgs/messageCenter.png'),
          routeUrl: 'messageCenter',
        },
      ],
      // 投诉类型
      typeList: [
        {
          id: 1,
          label: '建议',
        },
        {
          id: 2,
          label: '投诉',
        },
        {
          id: 3,
          label: '缴费反馈',
        },
        {
          id: 4,
          label: '其他问题',
        },
      ],
      // 投诉表单
      form: {
        type: '建议',
        phone: '',
        anonymous: false,
        name: '',
        des: '',
      },
      // 规则
      rules: {
        name: [
          { required: false, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        ],
        phone: [{ required: false, validator: tools.validatorPhone, message: '请输入正确的手机号码', trigger: 'blur' }],
        des: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
      target: '',
    };
  },
  components: {},
  computed: {},
  created() {
    this.getAllNews();
  },
  mounted() {
    this.$emit('changeNav', 'homePage');
    let scrollFlag = sessionStorage.getItem('scrollFlag');
    if (scrollFlag == 'true') {
      document.body.scrollTop = 1230;
      sessionStorage.setItem('scrollFlag', false);
    }
  },
  methods: {
    // 提交建议
    onSubmit() {
      let obj = {};
      Object.assign(obj, this.form);
      this.form.anonymous ? (obj.anonymous = 1) : (obj.anonymous = 0);
      obj.status = 0;
      submitSuggestion(obj).then((res) => {
        console.log(res);
      });
    },
    // 重置建议
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    // 实名选择更改
    handleSwitch() {
      this.rules.name[0].required = !this.rules.name[0].required;
      this.rules.phone[0].required = !this.rules.phone[0].required;
    },
    // 点击跳转
    handleRouter(item) {
      console.log(item);
      this.$emit('changeNav', item.routeUrl);
      this.$router.push(item.routeUrl);
    },
    // 获取所有新闻
    getAllNews() {
      findAllNews().then((res) => {
        if (res.code === 200) {
          res.data.forEach((res) => {
            if (res.newsType == 'carousel') {
              this.carouselMsg.push(res);
            } else {
              this.news.push(res);
            }
          });
        }
      });
    },
    // 跳转到具体新闻页面
    redirectToNews(id) {
      this.$router.push({
        path: '/newsDetails',
        query: {
          id,
        },
      });
    },
  },
  watch: {
    'form.anonymous': function (val) {
      if (!val) {
        this.form.name = '';
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.home-page {
  // padding: 0 220px;
  background-color: #fff;
}
.home-carousel {
  padding: 0 220px;
  background-color: #21325b;
  .home-carousel__images {
    position: relative;
  }
  .home-carousel__message {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px;
    font-size: 20px;
    font-style: normal;
    line-height: 1.35em;
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    color: white;
    div {
      width: 35%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.home-news {
  background-color: #f7faff;
  padding: 0 220px;
  .hone-new__items {
    padding-top: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    &:first-child {
      padding-top: 15px;
    }
    .el-tag {
      line-height: 15px;
      height: 20px;
      font-size: 12px;
      margin-right: 10px;
      padding: 1px 6px;
    }
    a {
      display: inline-block;
      width: 100%;
      font-size: 18px;
      line-height: 24px;
      color: #111;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s;
      white-space: nowrap;
      &:hover {
        padding-left: 10px;
        cursor: pointer;
      }
    }
  }
}
.home-server {
  background-color: #fff;
  padding: 0 220px;
  .home-server__flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  h2 {
    text-align: center;
    font-size: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .home-server__items {
    background-color: #fff;
    width: 220px;
    height: 200px;
    display: flex;
    word-wrap: break-word;
    margin-bottom: 30px;
    padding-top: 16px;
    background-color: #fff;
    border: 0.0625rem solid #e7eaf3;
    border-radius: 0.3125rem;
    box-shadow: 0px 12px 15px rgb(140 152 164 / 10%);
    border-width: 0;
    transition: all 0.2s ease-in-out;
    &:hover {
      margin-top: -10px;
      cursor: pointer;
    }
    span {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    .el-image {
      vertical-align: middle;
      border-style: none;
    }
    .home-server__content {
      flex: 1 1 auto;
      min-height: 1px;
      padding: 1.5rem;
      h3 {
        font-size: 1.125rem;
        text-align: center;
      }
    }
  }
}
.home-suggest {
  padding: 0 220px;
  background-color: #f7faff;
  padding-bottom: 50px;
  h2 {
    text-align: center;
    font-size: 40px;
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .home-suggest__flex {
    display: flex;
    justify-content: flex-start;
    border-radius: 4px;
    overflow: hidden;
    height: 465px;

    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .home-suggest__flex--main {
      margin-top: 0;
      height: 425px;
      width: 50%;
      background-color: #fff;
      padding: 20px;
    }
  }
}
</style>
